<div id="top-left">
  <span class="location-title">安全配置</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/security']">
      账户设置
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/profile']">
      基本资料
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/password']">
      密码修改
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/real-auth']">
      实名认证
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/refuse-words']">
      拒绝词汇
    </li>
  </ul>
  <div style="padding: 15px;">
    <nz-collapse>
      <nz-collapse-panel [nzHeader]="'账户当前安全等级'" [nzActive]="true">
        您的账户安全等级为：{{securityGrade}}
        <nz-progress [nzPercent]="securityScore" [nzShowInfo]="false"></nz-progress>
      </nz-collapse-panel>
    </nz-collapse>
    <div style="height: 20px;"></div>
    <nz-collapse>
      <nz-collapse-panel [nzHeader]="'账户安全设置项'" [nzActive]="true">
        <table class="security-table">
          <colgroup>
            <col width="140">
            <col width="140">
            <col>
            <col width="140">
          </colgroup>
          <tbody>
            <tr>
              <td>登录密码</td>
              <td><button nz-button nzType="primary">已设置</button></td>
              <td>安全性高的密码可以使账号更安全。建议您定期更换密码，且设置一个包含数字和字母，并且长度超过6位以上的密码。</td>
              <td><button nz-button nzType="primary" [routerLink]="['/main/user/password']"
                  nzDanger>重&nbsp;&nbsp;&nbsp;&nbsp;置</button></td>
            </tr>
            <tr>
              <td>绑定手机</td>
              <td><button nz-button
                  [nzType]="data['isPhoneAuth'] ? 'primary': 'default'">{{data['isPhoneAuth'] ? '已绑定': '未绑定'}}</button>
              </td>
              <td>{{data['isPhoneAuth'] ? '您绑定的手机为：' : ''}}{{data['phone']}}</td>
              <td><button *ngIf="!data['isPhoneAuth']" (click)="showAuth(1)" nz-button nzType="primary"
                  nzDanger>{{data['isPhoneAuth'] ? '更&nbsp;&nbsp;&nbsp;&nbsp;改': '去绑定'}}</button></td>
            </tr>
            <tr>
              <td>绑定邮箱</td>
              <td><button nz-button
                  [nzType]="data['isEmailAuth'] ? 'primary': 'default'">{{data['isEmailAuth'] ? '已绑定': '未绑定'}}</button>
              </td>
              <td>{{data['isEmailAuth'] ? '您绑定的邮箱为：' : ''}}{{data['email']}}</td>
              <td><button *ngIf="!data['isEmailAuth']" nz-button (click)="showAuth(2)" nzType="primary"
                  nzDanger>{{data['isEmailAuth'] ? '更&nbsp;&nbsp;&nbsp;&nbsp;改': '去绑定'}}</button></td>
            </tr>
            <tr>
              <td>实名认证</td>
              <td><button nz-button [nzDanger]="data['authentication'] === -1"
                  [nzType]="data['authentication'] === 0 ? 'default': 'primary'">{{data['authentication'] === -1 ? '认证失败' : data['authentication'] === 100 ? '已认证' : data['authentication'] === 1 ? '认证中': '未认证' }}</button>
              </td>
              <td>
                {{data['authentication'] === -1 ? data['authenticationFailMessage'] : data['authentication'] === 100 ? '认证成功' : data['authentication'] === 1 ? '认证中...': ''}}
              </td>
              <td><button *ngIf="data['authentication'] !== 100" nz-button nzType="primary"
                  [routerLink]="['/main/user/real-auth']"
                  nzDanger>{{data['authentication'] === -1 ? '重新认证' : data['authentication'] === 0 ? '去认证': data['authentication'] === 1 ? '查&nbsp;&nbsp;&nbsp;&nbsp;看' : '' }}</button>
              </td>
            </tr>
            <tr>
              <td>个人资料</td>
              <td><button nz-button nzType="primary">已填写</button></td>
              <td>个人资料发生变动时，请您及时更新信息</td>
              <td><button nz-button nzType="primary" [routerLink]="['/main/user/profile']"
                  nzDanger>更&nbsp;&nbsp;&nbsp;&nbsp;改</button></td>
            </tr>
          </tbody>
        </table>
      </nz-collapse-panel>
    </nz-collapse>
  </div>
</div>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isAuthShow" (nzOnCancel)="close()"
  [nzMaskClosable]="false" nzWidth="500" [nzTitle]="authMode === 1 ? '手机号码认证' : '电子邮箱认证'" [nzFooter]="null">
  <div class="detail-show">
    <div *ngIf="authMode === 1" nz-row [nzGutter]="16">
      <div nz-col nzSpan="6">手机号码</div>
      <div nz-col nzSpan="18"><input type="text" nz-input [(ngModel)]="data['phone']" placeholder="请输入手机号码" />
      </div>
    </div>
    <div *ngIf="authMode === 2" nz-row [nzGutter]="16">
      <div nz-col nzSpan="6">电子邮箱</div>
      <div nz-col nzSpan="18"><input type="text" nz-input [(ngModel)]="data['email']" placeholder="请输入电子邮箱" />
      </div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="6">验证码</div>
      <div nz-col nzSpan="18">
        <input style="width: 188px;" type="text" nz-input [(ngModel)]="data['verifyCode']" placeholder="请输入验证码" />
        <button style="margin-left: 10px; width: 102px;" [disabled]="codeButtonDisabled" #codeButton nz-button
          [nzType]="'primary'" (click)="sendCode()">{{codeButtonText}}</button></div>
    </div>
    <div nz-row [nzGutter]="16">
      <div nz-col nzSpan="6"></div>
      <div nz-col nzSpan="18"><button nz-button [nzSize]="'large'" (click)="submitAuth()"
          [nzType]="'primary'">提交认证</button></div>
    </div>
  </div>
</nz-modal>
